<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 600px;
            height: 300px;
            border: 4px solid skyblue;
        }
    </style>
</head>

<body>
    <button>获取彩票信息</button>
    <div id="box"></div>
    <script>
        window.onload = function() {
            var oBox = document.querySelector("#box");
            var oBtn = document.querySelector("button")
                // console.log(oBox, oBtn);
            oBtn.onclick = function() {
                // 获取彩票信息
                var caipiaoArr = getRandom(7, 2, 67);

                // 将彩票信息存入历史记录中
                window.history.pushState(caipiaoArr, "");
                // 将彩票信息显示在div中
                oBox.innerHTML = caipiaoArr;
                console.log(oBox.innerHTML);

            }

            //  点击  <——  就会触发事件,div中显示上一个历史记录信息
            // 给window绑定历史记录改变的事件,点击返回按钮出触发事件
            window.onpopstate = function(ev) {
                // 获取历史记录信息
                var arr = ev.state;
                // 将以前历史记录信息显示在div中
                oBox.innerHTML = arr;
                console.log(ev.state);
            }


            //count 个数 
            //start 随机的开始值
            //end   随机的结束值
            function getRandom(count, start, end) {
                var numArr = [];
                for (var i = 0; i < count; i++) {
                    var num1 = Math.floor(Math.random() * (end - start) + start);
                    numArr.push(num1);
                }
                return numArr;
            }
        }
    </script>
</body>

</html>